'use client'
import { Camera, Paperclip, ChevronDown, ThumbsUp, MessageCircle, Link } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { CommentType } from "@/types/home";
import Image from "next/image";
import { Card } from "@/components/ui/card";
import { useTranslations } from "next-intl";

function CommentBox({ commentList }: { commentList: CommentType[] }) {
  const t = useTranslations();
  return (
    <>
      <div className="max-w-2xl mx-auto space-y-6">
        {/* 顶部输入区域 */}
        <div className="space-y-4 bg-gray-100 rounded-lg">
          {/* 主要输入框和按钮 */}
          <div className="flex gap-3 px-4 py-4">
            <div className="flex-1 relative">
              <Textarea
                placeholder={t("Share_your_thoughts")}
                className="min-h-16 resize-none pr-8 bg-gray-50"
              />
            </div>
            {/* 右侧按钮组 */}
            <div className="flex flex-row gap-2 items-center">
              <Button
                size="icon"
                variant="outline"
                className="w-10 h-10 bg-white"
              >
                <Camera className="w-5 h-5" />
              </Button>
              <Button
                size="icon"
                variant="outline"
                className="w-10 h-10 bg-white"
              >
                <Paperclip className="w-5 h-5" />
              </Button>
              <Button
                size="icon"
                variant="outline"
                className="w-10 h-10 bg-white"
              >
                <ChevronDown className="w-5 h-5" />
              </Button>
            </div>
          </div>
        </div>

        {/* 用户帖子内容循环渲染 */}
        {commentList.map((comment) => (
          <Card key={comment.id} className="p-4 gap-2">
            {/* 用户名标识 */}
            <div className="py-2 rounded-lg flex items-center gap-3">
              <Image
                src={comment.avatar}
                alt={comment.alt}
                className="w-9 h-9 rounded-full object-cover border border-gray-200"
                width={36}
                height={36}
                sizes="100vw"
              />
              <div className="flex flex-col">
                <span className="font-semibold text-gray-800">{comment.name}</span>
                <span className="text-xs text-gray-400">{comment.date}</span>
              </div>
            </div>

            {/* 文本内容 */}
            <div className="text-gray-800 leading-relaxed">
              <p className="text-md pb-4">{comment.content}</p>
              <Image
                src={comment.image}
                alt={comment.alt}
                className="w-full h-auto rounded-lg mb-4"
                width={32}
                height={32}
                sizes="100vw"
              />
            </div>

            {/* 底部输入和交互区域 */}
            <div className="space-y-4">
              {/* 底部输入框 */}
              <div className="flex gap-3">
                <div className="flex-1 relative">
                  <Textarea
                    placeholder={t("Add_a_comment")}
                    className="min-h-16 resize-none pr-8"
                  />
                </div>

                {/* 交互按钮组 */}
                <div className="flex flex-row gap-2 items-center">
                  <Button size="icon" variant="outline" className="w-8 h-8">
                    <ThumbsUp className="w-4 h-4" />
                  </Button>
                  <Button size="icon" variant="outline" className="w-8 h-8">
                    <MessageCircle className="w-4 h-4" />
                  </Button>
                  <Button size="icon" variant="outline" className="w-8 h-8">
                    <Link className="w-4 h-4" />
                  </Button>
                </div>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </>
  );
}

export default CommentBox;
